<template>
    <div class="page" data-name="swipeout">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
                </div>
                <div class="title">swipeout</div>
            </div>
        </div>
        <div class="page-content">
            <div class="block-title">html结构</div>
            <pre class="block">{{escape exampleHtml}}</pre>
            <div class="block">
                <div class="row">
                    <button class="col button button-round button-fill" @click="handleOpen">open</button>
                    <button class="col button button-round button-fill" @click="handleClose">close</button>
                    <button class="col button button-round button-fill" @click="handleDelete">delete</button>
                </div>
            </div>
            <div class="block">
                {{exampleHtml}}
            </div>
            
        </div>
    </div>
</template>
<script>
    return {
        data:function(){
            return {
                exampleHtml:`<div class="list">
  <ul>
    <!-- Additional "swipeout" class on li -->
    <li class="swipeout" @swipeout:open="swipeoutOpen" @swipeout:closed="swipeoutClose">
      <!-- Usual list element wrapped with "swipeout-content" -->
      <div class="swipeout-content">
        <!-- Your list element here -->
        <div class="item-content">
          <div class="item-media">eee</div>
          <div class="item-inner">左右滑动</div>
        </div>
      </div>
      <!-- Swipeout actions left -->
      <div class="swipeout-actions-left">
        <!-- Swipeout actions links/buttons -->
        <a href="#">Action 1</a>
        <a href="#">Action 2</a>
      </div>
      <!-- Swipeout actions right -->
      <div class="swipeout-actions-right">
        <!-- Swipeout actions links/buttons -->
        <a href="#" class="swipeout-close">Action 1</a>
        <a href="#" class="swipeout-delete">Delete</a>
      </div>
    </li>
  </ul>
</div>`
            }
        },
        methods:{
            log(e){
                console.log(e)
            },
            swipeoutOpen(e){
                console.log('swipeoutOpen')
            },
            swipeoutClose(e){
                console.log('swipeoutClose')
            },
            handleOpen(){
                this.$app.swipeout.open('.swipeout','left',()=>{
                    console.log('open')
                })
            },
            handleClose(){
                this.$app.swipeout.close('.swipeout',()=>{
                    console.log('close')
                })
            },
            handleDelete(){
                this.$app.swipeout.delete('.swipeout',()=>{
                    console.log('delete')
                })
            },
        },
        on:{
            pageInit:function(){
                Dom7('[data-name=swipeout] .page-content').append(this.exampleHtml)
            }
        }
    }
</script>